<template>
  <div class="q-mt-sm h-3xl column justify-center" v-if="!props.loading">
    <div class="text-center">
      <q-btn
        :loading="likeBtnLoad"
        flat
        :class="articleVo?.isStar ? 'text-primary' : ''"
        round
        icon="fa-solid fa-heart"
        @click="
          () => {
            starClick();
          }
        "
      >
        <q-badge
          v-if="articleVo?.star"
          floating
          color="grey-6"
          :label="articleVo?.star"
        />
        <q-tooltip> 点赞 </q-tooltip>
      </q-btn>
    </div>
    <div class="text-center q-pt-md">
      <q-btn
        flat
        round
        icon="fa-solid fa-comment-dots"
        @click="
          () => {
            scrollToComment();
          }
        "
      >
        <q-badge
          v-if="commentsNum > 0"
          floating
          color="grey-6"
          :label="commentsNum"
        />
        <q-tooltip> 跳转到评论 </q-tooltip>
      </q-btn>
    </div>
    <div class="text-center q-pt-md">
      <q-btn
        :loading="favBtnLoad"
        flat
        round
        :class="articleVo?.isFav ? 'text-primary' : ''"
        icon="fa-solid fa-star"
        @click="
          () => {
            favoritesClick();
          }
        "
      >
        <q-badge
          v-if="articleVo?.favorites"
          floating
          color="grey-6"
          :label="articleVo?.favorites"
        />
        <q-tooltip> 收藏 </q-tooltip>
      </q-btn>
    </div>
  </div>
  <div class="q-mt-sm h-3xl column justify-center" v-else>
    <div class="row justify-center">
      <q-skeleton type="QAvatar" />
    </div>
    <div class="row justify-center q-pt-md">
      <q-skeleton type="QAvatar" />
    </div>
    <div class="row justify-center q-pt-md">
      <q-skeleton type="QAvatar" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWebStore } from 'src/stores/webStore';
import { scroll } from 'quasar';
import { useYuan } from 'src/use';
import { articleFavorites, articleStar } from 'src/service/api';
import { commentsNum, articleVo, articleId } from './shared';
import useBoolean from 'src/use/useBoolean';

const props = defineProps<{
  loading: boolean;
}>();

const webStore = useWebStore();

const { getScrollTarget, setVerticalScrollPosition } = scroll;

const { Ok } = useYuan();

const {
  bool: likeBtnLoad,
  setTrue: likeLoadStart,
  setFalse: likeLoadStop,
} = useBoolean();
const {
  bool: favBtnLoad,
  setTrue: favLoadStart,
  setFalse: favLoadStop,
} = useBoolean();

// 滚动到评论区
function scrollToComment() {
  const comment = document.getElementById('comment');
  if (comment) {
    const target = getScrollTarget(comment);
    const offset = comment.offsetTop;
    const duration = 300;
    setVerticalScrollPosition(target, offset, duration);
  }
}

// 文章点赞
const starClick = async () => {
  likeLoadStart();
  if (!webStore.isLogin) {
    webStore.loginDig = true;
    likeLoadStop();
    return;
  }
  const { error, data } = await articleStar({ articleId: articleId.value });
  likeLoadStop();
  if (!error) {
    if (data) {
      if (articleVo.value) {
        articleVo.value.isStar = true;
        articleVo.value.star = articleVo.value.star + 1;
        Ok('点赞成功');
      }
    } else {
      if (articleVo.value) {
        articleVo.value.isStar = false;
        articleVo.value.star = articleVo.value.star - 1;
        Ok('取消点赞成功');
      }
    }
  }
};

// 文章收藏
const favoritesClick = async () => {
  favLoadStart();
  if (!webStore.isLogin) {
    webStore.loginDig = true;
    favLoadStop();
    return;
  }
  const { data, error } = await articleFavorites({
    articleId: articleId.value,
  });
  favLoadStop();
  if (!error) {
    if (data) {
      if (articleVo.value) {
        articleVo.value.isFav = true;
        articleVo.value.favorites = articleVo.value.favorites + 1;
      }
      Ok('文章收藏成功');
    } else {
      if (articleVo.value) {
        articleVo.value.isFav = false;
        articleVo.value.favorites = articleVo.value.favorites - 1;
      }
      Ok('取消收藏成功');
    }
  }
};
</script>

<style scoped></style>
